<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import Home from "./page/home/home.vue";
import { EventBus } from "./utils/EventBus.js";
import { Change } from "./utils/animation";

export default {
  name: "App",
  data() {
    return {
      transitionName: "",
      change: new Change(),
    };
  },
  components: {
    Home,
  },
  watch: {
    $route(to, from) {
      if (to.name === "game" && from.name === "home") {
        this.transitionName = "slide-top";
      }
    },
  },
  async created() {},
  async mounted() {
    //TODO 获取数据
    // EventBus.$on('Data-Config',item => {
    //   document.title = item.title
    // })
    var Share = window["cctvh5-share"].default;
    const params = {
      shareId: "itemtype=aid&aid=5f9fbf5015fc6f5eb63584a5",
      shareTitle: "“奋斗万米” 致敬有你",
      shareSubTitle: "来央视频，一起探秘马里亚纳海沟！",
      //shareUrl: window.location.href,
      shareUrl: "https://m.yangshipin.cn/static/x/iframe/deepDiving/index.html#/?v=1",
      shareImgUrl:
        "https://wimg.yangshipin.cn/pics/20201102_3hfk351e1lcshenghai.png",
      changeTagTitle: false,
    };
    if (this.isYangshipin()) {
      Share.setShareData(params);
    } else Share.init(params);
  },
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.anchorBL {
  display: none;
}
.Router {
  position: absolute;
  height: 100%;
  transition: all 0.377s ease;
  will-change: transform;
  top: 0;
  backface-visibility: hidden;
  perspective: 1000;
}

.slide-top-enter-active {
  animation: slide-top-leave 2s ease-in-out;
}
.slide-top-leave-active {
  animation: slide-top-enter 0.4s;
}
/* .slide-top-leave {
  opacity: 1;
  animation: slide-top-enter 5s ease-in-out;
}
.slide-top-leave {
  animation: slide-top-leave 5s ease-in-out;
  opacity: 1;
} */
@keyframes slide-top-enter {
  from {
    transform: translateY(20%);
  }
  to {
    transform: translateY(50%);
  }
}
@keyframes slide-top-leave {
  from {
    transform: translateY(-10%);
  }
  to {
    transform: translateY(0%);
  }
}
</style>
